<script>
import htmlToExcel from '@/utils/htmlToExcel.js'
import { getAllFault, changeFault } from '@/api/fault.js'
import { formatDate } from '@/utils/index.js'

export default {
  data() {
    return {
      tableData: [],
      selectData: [],
      formDate: {
        id: '',
        status: '',
        solution: ''
      },
      searchData: {
        hostName: '',
        reportedBy: ''
      },
      selectWindow: false,
      dialogVisible: false,
      total: 0,
      size: 10,
      page: 1,
      loading: false
    }
  },
  mounted() {
    this.getAllFault()
  },
  methods: {
    formatDate,
    // 重置
    async handleRefresh() {
      this.loading = true
      this.searchData.hostName = ''
      this.searchData.reportedBy = ''
      await this.getAllFault()
      this.loading = false
      this.size = 10
      this.page = 1
    },
    commonHandle(res) {
      this.tableData = res.records
      this.total = res.total
      this.size = res.size
      this.loading = false
    },
    async getAllFault() {
      if (this.searchData.hostName === '' && this.searchData.reportedBy === '') {
        const res = await getAllFault(this.page, this.size)
        this.commonHandle(res)
      } else if (this.searchData.hostName === '') {
        const reqData = {
          reportedBy: this.searchData.reportedBy
        }
        const res = await getAllFault(this.page, this.size, reqData)
        this.commonHandle(res)
      } else if (this.searchData.reportedBy === '') {
        const reqData = {
          hostName: this.searchData.hostName
        }
        const res = await getAllFault(this.page, this.size, reqData)
        this.commonHandle(res)
      } else {
        const res = await getAllFault(this.page, this.size, '', this.searchData)
        this.commonHandle(res)
      }
    },
    async handleSearch() {
      this.loading = true
      console.log('搜索', this.searchData)
      await this.getAllFault()
    },
    // 分页-size
    handleSizeChange(size) {
      this.loading = true
      this.size = size
      this.page = 1
      this.getAllFault()
    },
    // 分页-page
    handleCurrentChange(page) {
      this.loading = true
      this.page = page
      this.getAllFault()
    },
    // excel导出2
    exportExcel() {
      htmlToExcel.getExcel('#tableData', '工单')
    },
    exportExcelSelect() {
      if (this.selectData.length < 1) {
        this.$message.error('请选择要导出的内容！')
        return false
      }
      this.selectWindow = true
    },
    handleSelectionChange(val) {
      this.selectData = val
    },
    // 编辑
    handleEdit(row) {
      this.dialogVisible = true
      console.log(row.status)
      this.formDate.id = row.id
      this.formDate.status = row.status
      this.formDate.solution = row.solution
    },
    async verBtn() {
      console.log(this.formDate)
      await changeFault(this.formDate)
      await this.getAllFault()
      this.dialogVisible = false
      this.$message({
        type: 'success',
        message: '修改成功!'
      })
    },
    cancelBtn() {
      this.dialogVisible = false
    }
  }
}
</script>
<template>
  <!-- 全部工单 -->
  <div class="allfiles_container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>全部工单</span>
        <!-- <el-tag type="primary" style="float: right">最近更新:{{ tableData.length ? formatDate(tableData[0].resolutionTime) : '无数据' }}</el-tag> -->
      </div>
      <div slot="header" class="clearfix">
        <el-row style="background-color: #FFFFFF;width: 99%;">
          <el-col :span="14">
            <!-- # 条件查询 -->
            <el-form ref="searchForm" :model="searchData" label-width="80px" style="display:flex;margin-top:8px ">
              <el-form-item label="主机名">
                <el-input v-model="searchData.hostName" />
              </el-form-item>
              <el-form-item label="上报人">
                <el-input v-model="searchData.reportedBy" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="handleSearch">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-refresh" circle @click="handleRefresh" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
      <!-- 表格数据 -->
      <el-table v-loading="loading" element-loading-text="正在加载中" :data="tableData" style="width: 100%" stripe @selection-change="handleSelectionChange" >
        <el-table-column type="selection" />
        <el-table-column width="100" type="index" label="序号" />
        <el-table-column prop="faultId" label="工单号" width="100" />
        <el-table-column prop="hostName" label="主机名" width="140" />
        <el-table-column prop="status" label="解决状态" width="100">
          <template slot-scope="scope">
            <el-tag size="medium" :type="scope.row.status === '0' ? 'success' : 'danger'">
              {{ scope.row.status === '0' ? '已解决' : '未解决' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reportedBy" label="上报人" width="130" />
        <el-table-column label="故障日期" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatDate(scope.row.faultDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="解决时间" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ formatDate(scope.row.resolutionTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="solution" label="解决方案" width="200" />
        <el-table-column label="操作" align="center" min-width="150">
          <template slot="header">
            <el-button type="primary" plain size="mini" @click="exportExcelSelect">导出工单</el-button>
          </template>
          <!-- <template slot-scope="scope">
            <el-button v-permission="'duty:modify'" size="mini" @click="handleEdit(scope.row)">编辑
            </el-button>
          </template> -->
        </el-table-column>
        <template v-slot:empty>
          <div style="height: 200px;">
            <img src="../../../../assets/nodata.png" width="150" style="margin: 30px;">
          </div>
        </template>
      </el-table>
      <el-pagination
        :page-size="size"
        :current-page.sync="page"
        :page-sizes="[10, 15, 20, 25, 100]"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
      <el-table id="tableData" :data="selectData" height="380px" align="center">
        <el-table-column width="100" type="index" label="序号" align="center" />
        <el-table-column prop="faultId" label="工单号" width="180" align="center" />
        <el-table-column prop="hostName" label="主机名" width="180" align="center" />
        <el-table-column prop="reportedBy" label="上报人" width="130" align="center" />
        <el-table-column label="故障日期" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.faultDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="解决时间" width="180" align="center">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.resolutionTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="solution" label="解决方案" width="200" align="center" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportExcel">确定导出</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="50%">
      <div>
        <el-form ref="formDateRef" label-position="right" label-width="120px" :model="formDate">

          <el-form-item label="解决状态" prop="shift">
            <el-radio-group v-model="formDate.status">
              <el-radio label="0">已解决</el-radio>
              <el-radio label="1">未解决</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="解决方案">
            <el-input v-model="formDate.solution" placeholder="解决方案" />
          </el-form-item>

        </el-form>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn">取 消</el-button>
        <el-button type="primary" @click="verBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<style scoped lang='scss'>
.newbox_container {
  width: 99%;
}

.box-card {
  margin-top: 10px;
}
</style>
